<!--
 * @Date: 2021-11-10 11:23:23
 * @LastEditors: 邓春宜
 * @Desc: 报警灯
 * @LastEditTime: 2021-11-17 16:21:45
 * @FilePath: \tianjushi-kanban\src\components\text\TextStyle2.vue
-->
<template>
  <div
    class="box"
    :style="{
      width: isNaN(width) ? width : width + 'px',
      height: isNaN(height) ? height : height + 'px',
      'border-color': color,
      'background-color': bgcolor,
      'box-shadow': '0 0 5px ' + hexToRgba(color, 0.8),
    }"
  >
    <div
      :style="{
        height: height * 0.8 + 'px',
        'margin-top': height * 0.1 - 6 + 'px',
      }"
      class="box2"
    >
      <div
        :style="{
          width: '35%',
          'border-right': '2px solid ' + hexToRgba(color, 0.9),
        }"
        class="box-l"
      >
        <AlertOutlined
          :style="{
            fontSize: isNaN(fontSize) ? fontSize : fontSize + 'px',
            color: color,
          }"
        />
        <p :style="{ fontSize: fontSize / 3.5 + 'px', 'margin-top': '20px' }">
          {{ title }}
        </p>
      </div>
      <div :style="{ width: '65%' }" class="box-r">
        <slot
          ><div>
            <p
              :style="{
                fontSize: _fontSize+ 'px',
                color: color,
                'line-height':_lineHeight+'px'
              }"
            >
              {{desc}}
            </p>
            <p v-if="showtime" class="time_p" :style="{
                fontSize: '20px',
                color: '#fff',
               'background-color': hexToRgba(color, 0.6),
              }">{{time}}</p>
          </div></slot
        >
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, toRefs, ref, reactive, watch, computed } from "vue";
import { AlertOutlined } from "@ant-design/icons-vue";
import { hexToRgba } from "@/core/tools/common";
export default {
  components: {
    AlertOutlined,
  },
  props: {
    width: {
      type: [String, Number],
      default: "100%",
    },
    height: {
      type: Number,
      default: 100,
    },
    fontSize: {
      type: [String, Number],
      default: 90,
    },
    title: {
      type: String,
      default: "标题",
    },
    time: {
      type: String,
      default: "1234567.89",
    },
    desc: {
      type: String,
      default: "kg",
    },
    type: {
      type: Number,
      default: 1,
    },
  },
  computed: {},
  setup(props) { 
    const state = reactive({
      color: "",
      bgcolor:"",
      _fontSize:props.fontSize -10 ,
      _lineHeight:props.height*0.8,
      showtime:false
    });
    let itime = false ; 
    const colorChange = function (type) { 
        if (itime) {
           clearInterval(itime);
         }
      if (type == 2) {
        state.color = "#DCDE14";
        state.bgcolor = hexToRgba(state.color, 0.4);
        state.showtime = true ;
        state._lineHeight = props.height *0.6 ;
        state._fontSize = props.fontSize -20;
      } else if (type == 0) {
        state.color = "#DE1435";
        state.bgcolor = hexToRgba(state.color, 0.4);
        state.showtime = true ;
         state._lineHeight = props.height *0.6 ;
         state._fontSize = props.fontSize -20;
         //闪烁
         let op  = 0.4 ;
         
         itime = setInterval(() => {
            op=op==0.4?0.7:0.4; 
           state.bgcolor = hexToRgba(state.color, op);
           state.color = op==0.4?"#DE1435":"#FFFFFF";
         }, 500);
      } else {
        state.showtime = false ;
        state.color = "#06B352"; 
        state.bgcolor = hexToRgba(state.color, 0.4);
         state._lineHeight = props.height *0.8 ;
         state._fontSize = props.fontSize -10;
      }
     }
//hexToRgba(color, 0.4)
    colorChange(props.type) 
    /*监听props*/
    watch(props, (nweProps, oldProps) => { 
       colorChange(nweProps.type) 
    });

    return {
      ...toRefs(state),
      hexToRgba,
    };
  },
};
</script>

<style lang="css" scoped>
.box {
  line-height: 1;
  box-sizing: border-box;
  text-align: center;
  border-style: solid;
  border-width: 3px;
 
 
}
.box2 {  display: -webkit-flex; /* Safari */
   display: flex;
   flex-direction: row ;}
.box2 > div { 
  box-sizing: border-box;
  height: 100%;
}
.time_p { width: 80%; margin: auto; padding:10px 0; line-height: 100%;}
 
</style> 